<template>
    <div class="detail">
      <div class="detail-wrap">
        <div class="detail-header">
          <div>DAW详情</div>
          <!-- <img src="@/assets/img/close.png" @click="hidden()"> -->
        </div>
        <div class="detailInfo">
          <div>
            <!-- <div class="detail-tit">1.DAW链上信息</div> -->
            <div class="detail-head">
              <div class="detail-tit">1.DAW链上信息</div>
              <div>
                <span v-if="dawStatus==0">未售</span>
                <span v-if="dawStatus==1">已售</span>
                <span v-if="dawStatus==2">已销毁</span>
              </div>
            </div>
            <ul>
              <li>
                <span>denom名称：</span>
                <span>{{ denomName }}</span>
              </li>
              <li>
                <span>denomID：</span>
                <span>{{ denomId }}</span>
              </li>
              <li>
                <span>DAW名称：</span>
                <span>{{ dawName }}</span>
              </li>
              <li>
                <span>tokenID：</span>
                <span>{{ dawId }}</span>
              </li>
              <!-- <li>
                <span>归属人：</span>
                <span>0xf6d1648e3861961e6afda188bef75cfdcc01758d</span>
              </li> -->
              <li>
                <span>URL：</span>
                <span>{{ dawUri }}</span>
              </li>
            </ul>
          </div>
          <div>
            <div class="detail-tit">2.DAW铸造信息</div>
            <ul>
              <li>
                <span>铸造账号：</span>
                <span>{{ userId }}</span>
              </li>
              <li>
                <span>铸造人：</span>
                <span>{{ userName }}</span>
              </li>
              <!-- <li>
                <span>铸造平台：</span>
                <span>嗨艺购</span>
              </li> -->
              <li>
                <span>提交时间：</span>
                <span>{{ submitTime }}</span>
              </li>
              <li>
                <span>铸造时间：</span>
                <span>{{ castingTime }}</span>
              </li>
              <li>
                <span>铸造区块链：</span>
                <span>{{ blockchain }}</span>
              </li>
              <li>
                <span>交易哈希：</span>
                <span>{{ dawHash }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  // import * as api from '@/api/product/attr'
  export default {
    name: 'Detail',
    // eslint-disable-next-line vue/require-prop-types
    props: ['id','dawStart'],
    data() {
      return {
        denomName: '', // denom名称
        denomId: '', // denomID
        dawName: '', // DAW名称
        dawId: '', // tokenID
        dawStatus: "", //状态
        dawUri: '', // url
        userId: '', // 铸造账号
        userName: '', // 铸造人
        // creater: "", //
        submitTime: '', // 提交时间
        castingTime: '', // 铸造时间
        blockchain: '', // 铸造区块链
        dawHash: '' // 交易哈希
      }
    },
    created() {
      this.$http({
          url: this.$http.adornUrl(`/admin/nftdaw/getDawInfoById?id=${this.id}&dawStatus=${this.dawStart}`),
          method: 'get',
      }).then(({ data }) => {
          const nftDaw = data.data.nftDaw
          const nftDenom = data.data.nftDenom
          const nftNameDaw = data.data.nftNameDaw
  
          this.denomName = nftDenom.denomName // denom名称
          this.denomId = nftDenom.denomId // denomID
          this.dawName = nftNameDaw.dawName // DAW名称
          this.dawId = nftDaw.dawId // tokenID
          this.dawStatus = nftDaw.dawStatus //状态
          this.dawUri = nftNameDaw.dawUri // url
          this.userId = nftNameDaw.userId // 铸造账号
          this.userName = nftNameDaw.userName // 铸造人
          // this.creater = nftDenom.creater; //
          this.submitTime = nftNameDaw.createTime // 提交时间
          this.castingTime = nftDaw.createTime // 铸造时间
          this.blockchain = nftNameDaw.blockchain // 铸造区块链
          this.dawHash = nftDaw.dawHash // 交易哈希
      })
    },
    methods: {
      hidden() {
        // 通过$emit引用组件传过来的hidden()事件
        this.$emit('hidden')
      }
    }
  }
  </script>
  
  <style scoped>
      li{ list-style-type: none; }
      .detail{
          position: fixed;
          top: 0; left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0,0,0,.5);
          z-index: 2005;
      }
      .detail-wrap{
          position: absolute;
          top: 50%; left: 50%;
          transform: translate(-50%,-50%);
          width: 1000px;
          height: auto;
          background: #fff;
      }
      .detail-header{
          position: relative;
          background: rgb(243,243,243);
          border-bottom: 1px solid #ccc;
          padding: 20px 30px;
      }
      .detail-tit{
          display: flex;
          flex-direction: column;
      }
      .detail-div{
          display: flex;
          flex-direction: row;
          margin-top: 10px;
      }
      .detail-div>div{
          margin-right: 30px;
      }
      .detail-header img{
          position: absolute;
          top: 0;
          right: 0;
          width: 50px;
          padding: 15px;
          cursor: pointer;
      }
      .detail-head{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }
      .detail-tit{
          position: relative;
          width: 130px;
          line-height: 30px;
          text-align: center;
          font-size: 15px;
          color: #fff;
          background: rgb(158,167,180);
      }
      .detail-tit::after{
          content: "";
          position: absolute;
          top: 0; right: -30px;
          width: 0;
          height: 0;
          border: 15px solid;
          border-color: transparent;
          border-left-color: rgb(158,167,180);
      }
      .detail-head div:last-child{
        font-size: 30px;
        font-weight: bold;
      }
      .detailInfo{
          padding: 30px 100px;
      }
      .detailInfo ul{ padding-left: 0; }
      .detailInfo ul li{
          margin-top: 15px;
      }
  </style>
  